<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>我的订单</title>
    <link rel="stylesheet" href="/ui/mobile/iconfont/iconfont.css">
    <link rel="stylesheet" href="/ui/mobile/css/ui.all.css"/>
    <link rel="stylesheet" href="/ui/mobile/css/style.css" type="text/css"/>
</head>

<body>
<main class="c-main">
    <header class="myorder-tab">
        <div class="c-position-f">
            <a data-btn="tab" data-states="" href="javascript:" class="mt-col">全部</a>
            <a data-btn="tab" data-states="2,3" href="javascript:" class="mt-col">已支付</a>
            <a data-btn="tab" data-states="-1,-2" href="javascript:" class="mt-col">已取消</a>
        </div>
    </header>

    <div data-wrap="list" class="p12"></div>
</main>

<script type="text/javascript" src="/m/public/all.ui.js"></script>
<script src="/ui/mobile/iconfont/iconfont.js"></script>
<script src="/m/public/util.js"></script>
<script type="text/javascript">
    let currPage = 1;
    let totalPage = 1;
    const pageSize = 15;
    let reqFinish = true;

    const orderStateDict = {"1": "待支付", "2": "已支付", "3": "已完成", "-1": "已取消", "-2": "已取消"}

    $('[data-btn="tab"]').on("click", function () {
        const $this = $(this);
        $this.addClass("curr").siblings().removeClass("curr");
        currPage = 1;
        totalPage = 1;

        reqFinish = false;
        initMyQuesOrderList(() => {
            reqFinish = true;
        });
    });

    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();

        if (scrollTop + windowHeight >= scrollHeight) {
            if (currPage + 1 > totalPage) {
                return;
            }
            if (!reqFinish) {
                return;
            }

            reqFinish = false;
            currPage += 1;
            initMyQuesOrderList(() => {
                reqFinish = true;
            });
        }
    });

    $('[data-btn="tab"]:first').click();
    const $listWrap = $('[data-wrap="list"]');

    function initMyQuesOrderList(callback = Function()) {
        const orderStates = $('[data-btn="tab"].curr').attr('data-states');
        queryMyQuesOrderPage({
            pageIndex: currPage,
            pageSize,
            orderStates
        }, ({Code: code, Message: message, Result: list = [], Total: total}) => {
            if (code !== 10000) {
                totalPage = 1;
                callback();
                return $listWrap.html(`<p class="page-end">${message}</p>`);
            }

            if (!list || !list.length) {
                totalPage = 1;
                callback();
                return $listWrap.html(`<p class="page-end">没有更多了 ~</p>`);
            }

            totalPage = Math.ceil(total / pageSize);

            if (currPage === 1) {
                $listWrap.html("");
            }

            list.forEach(info => {
                $listWrap.append(getListCard(info));
            })

            callback();
        })

        function getListCard(info) {
            const {
                orderState, price, questionTitle
                , orderId, addTime
            } = info;
            const priceStr = price ? (price / 100).toFixed(2) : "0.00";
            const stateDesc = orderStateDict[orderState + ""];

            const $dom = $(`
                <div class="myorder-box">
                    <div class="mb-title">
                        <p>${questionTitle}</p>
                        <span class="${[1].concat(orderState) ? 't-org' : 't-blue'}">${stateDesc}</span>
                    </div>
                    <ul class="mb-list">
                        <li>
                            <p class="tit">订单价格</p>
                            <p class="info">¥${priceStr}</p>
                        </li>
                        <li>
                            <p class="tit">订单编号</p>
                            <p class="info">${orderId}</p>
                        </li>
                        <li>
                            <p class="tit">下单时间</p>
                            <p class="info">${addTime}</p>
                        </li>
                    </ul>
                </div>
            `);

            const $btnWrap = $(`<div class="mb-btnrow"></div>`);
            $dom.append($btnWrap);

            const $payBtn = $(`<a href="javascript:;" class="m-btn btn-org">支付</a>`);
            const $updBtn = $(`<a href="javascript:;" class="m-btn btn-blue">修改</a>`)
            const $detailsBtn = $(`<a href="javascript:;" class="m-btn">查看详情</a>`)

            if (orderState === 1) {
                $btnWrap.append($payBtn, $updBtn);
            } else if (orderState === 2) {
                $btnWrap.append($updBtn);
            } else {
                $btnWrap.append($detailsBtn);
            }

            $payBtn.on("click", () => {
                location.href = "/m/questionOrder/orderConfirm.html?" + $.param({orderId});
            });

            $updBtn.on("click", () => {
                window.location.href = "/m/questionOrder/updOrder.html?" + $.param({orderId});
            })

            $detailsBtn.on("click", () => {
                window.location.href = "/m/questionOrder/orderDetails.html?" + $.param({orderId});
            })

            return $dom;

        }
    }

    function queryMyQuesOrderPage(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/QuestionOrder/queryMyQuesOrderPage"
        }, callback)
    }

</script>
</body>

</html>